<template>
	<view class="inform">
		<!-- <view class="inform-title">小额人工商品林采伐承诺书</view> -->
		<view class="inform-content">
			<view class="inform-content-box">
				<view class="inform-title">小额人工商品林采伐承诺书</view>
				<view class="textindent">
					本人已经充分理解和知晓告知书的全部内容，出于本人真实的意思，现提出采伐申请，并作出如下承诺：
				</view>
				<view class="textindent">
					本人（{{ idCardName }}，身份证号：{{
            idCardNo
          }}）承诺申请采伐的林木符合告知书及相关政策规定的采伐条件、标准、要求。
				</view>
				<view class="textindent">
					本人申请采伐的林木位于{{ townName }} {{ regionName }}，{{
            villagerGroup
          }}村民小组， 小地名：{{ address }}。采伐小班粗略中心点坐标：
					{{ points }} 、{{ point }} , 面积{{ harvestArea }}亩，林龄{{
            treeAge
          }}年，采伐树种为{{ volumeIdName }} , 更新树种及措施：{{
            updateTree + ":" + updateType
          }}
					。所提交的照片为伐区内及伐区周边拍摄，真实反映伐区目前总体状况。
				</view>
				<view class="textindent">
					本人对伐区的林木具有林木所有权，无争议，提供的林木权属材料真实，与伐区位置对应，遇利害关系人的请求或林业主管部门提出权属等问题时暂停采伐，配合审批机关调查核实。
				</view>
				<view class="textindent">
					本人承诺提交的基本信息内容真实、准确、无误；承诺于{{ year }}年{{
            month
          }}月前按照有关要求完成更新造林（皆伐类），并承诺按照林木采伐许可证注明的树种及有关规定要求更新造林。
				</view>
				<view class="textindent">
					如上述承诺失实，本人愿意承担不实承诺、违法承诺等相应的法律责任。
				</view>
				<view class="textindent">
					本人明白本承诺之意思表示并自愿受其约束。
				</view>
			</view>
			<view class="polygon">
				<view class="polygon-p">
					<view class="polygon-p-title">
						<view class="polygon-p-title-f">*</view>
						<view class="polygon-p-title-t">电子签名：</view>
					</view>
					<view class="polygon-p-btn">
						<view class="p-btn1" @click="onSign">签名</view>
					</view>
				</view>
				<view class="qianming">
					<image class="sign-image" v-if="signBase64" :src="signBase64" mode="widthFix"></image>
				</view>
			</view>
			<view class="logging-box">
				<uni-forms class="customForm" ref="customForm" :modelValue="loggingFromData" label-position="top">
					<uni-forms-item class="form-item" label="手机号码：" required name="phoneNumber">
						<uni-easyinput v-model="loggingFromData.phoneNumber" placeholder="请输入" />
					</uni-forms-item>

					<uni-forms-item class="form-item form-item-two form-item-input" label="短信验证码：" required name="code">
						<uni-easyinput v-model="loggingFromData.code" placeholder="请输入" />
						<button :disabled="iscode" class="input-text" @click="codecilck">{{codeTitle}}</button>
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>
		<view class="inform-btn">
			<button class="long-radius-btn sumit-btn" @click="leeBtnClickD">
				提交申请
			</button>
		</view>
	</view>
</template>

<script>
	// import {
	// 	uploadFile,
	// 	sendSms,
	// 	harvestInfoadd
	// } from "../../http/api.js";
	// import ajax from "../../http/index.js";
	// import {
	// 	debounced,
	// 	throttle,
	// } from "../../components/leejs_debounced_throttle.js";
	export default {
		data() {
			return {
				signBase64: "",
				signTempimg: "",
				iscode: false,
				codeTitle: '获取',
				countdown: 60,
				loggingFromData: {
					phoneNumber: null,
					code: null,
				},
				idCardName: null,
				idCardNo: null,
				townName: null,
				regionName: null,
				villagerGroup: null,
				address: null,
				treeAge: null,
				volumeIdName: null,
				updateTree: null,
				updateType: null,
				harvestArea: null,
				year: null,
				month: null,
				points: null,
				point: null,
				commitmentFiles: [],
				visitorRules: {
					phoneNumber: {
						rules: [{
								required: true,
								errorMessage: "请输入手机号码",
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(value)) {
										callback("手机号格式有误");
										return true;
									}
								},
							},
						],
					},
					code: {
						rules: [{
							required: true,
							errorMessage: "请输入验证码",
						}, ],
					},
				},
				globalVariable: {}
			};
		},
		onReady() {
			this.$nextTick(() => {
				this.$refs.customForm.setRules(this.visitorRules);
			});
			this.globalVariable = this.$store.state.globalVariable
			this.idCardName = this.globalVariable.idCardName;
			this.idCardNo = this.globalVariable.idCardNo;
			this.townName = this.globalVariable.townName;
			this.regionName = this.globalVariable.regionName;
			this.villagerGroup = this.globalVariable.villagerGroup;
			this.address = this.globalVariable.address;
			this.treeAge = this.globalVariable.treeAge;
			if (this.globalVariable.volumeIdName) {
				this.volumeIdName = this.globalVariable.volumeIdName;
			} else if (this.globalVariable.otherVolume) {
				this.volumeIdName = this.globalVariable.otherVolume;
			}
			this.updateTree = this.globalVariable.updateTree;
			this.updateType = this.globalVariable.updateType;
			this.harvestArea = this.globalVariable.harvestArea;
			this.year = new Date(this.globalVariable.completionTime).getFullYear();
			this.month = new Date(this.globalVariable.completionTime).getMonth() + 1;
			this.points = this.globalVariable.cuttingPoint.substring(
				16,
				this.globalVariable.cuttingPoint.indexOf(" ")
			);
			this.point = this.globalVariable.cuttingPoint.substring(
				this.globalVariable.cuttingPoint.lastIndexOf(" "),
				this.globalVariable.cuttingPoint.lastIndexOf(")")
			);
			this.loggingFromData.phoneNumber = this.globalVariable.phoneNumber;
		},
		methods: {

			async leeBtnClickD() {
				if (!this.commitmentFiles.length) {
					uni.showToast({
						icon: "error",
						title: "请进行电子签名",
					});
					return;
				}
				const validationPromises = this.$refs.customForm
					.validate()
					.then((formValid) => {
						return formValid;
					})
					.catch((err) => {
						console.log(err);
						uni.showToast({
							icon: "error",
							title: `${err[0].errorMessage}`,
						});
						return false;
					});
				const validationResults = await Promise.all([validationPromises]);
				const allVisitorsValid = validationResults.every((valid) => valid);
				if (!allVisitorsValid) {
					return;
				}
				this.globalVariable.completionTime = this.format(
					this.globalVariable.completionTime
				);
				this.globalVariable.phoneNumber = this.loggingFromData.phoneNumber;
				this.globalVariable.commitmentFiles = this.commitmentFiles[0];
				this.globalVariable.code = this.loggingFromData.code;
				this.harvestInfoadd();
			},
			format(date) {
				let time = new Date(date);
				let year = time.getFullYear() + "";
				let month = time.getMonth() + 1 + "";
				let day = time.getDate() + "";
				if (Number(month) < 10) {
					month = "0" + month;
				}
				if (Number(day) < 10) {
					day = "0" + day;
				}
				return year + "-" + month + "-" + day;
			},
			onSign() {
				uni.navigateTo({
					url: "/pages/sign/sign",
					success: () => {
						// 监听一次
						uni.$once("getSignImg", (e) => {
							console.log("getSignImg", e);
							// 多签名场景下可根据 sid 区分不同签名
							if (e.sid == "sign-board") {
								this.signBase64 = e.base64;
								this.signTempimg = e.path;
								this.uploadImgVideo(e);
							}
						});
					},
				});
			},
			async codecilck() {
				this.iscode = true
				this.countdown = 60; // 倒计时总秒数
				this.codeTitle = 60
				// 每秒更新一次倒计时
				const timer = setInterval(() => {
					this.countdown--; // 减少1秒
					this.codeTitle = this.countdown
					if (this.countdown < 0) {
						clearInterval(timer); // 倒计时结束，清除定时器
						console.log('倒计时结束！');
						this.iscode = false
						this.codeTitle = '获取'
					}
				}, 1000); // 1000毫秒 = 1秒

				let res = await this.muajax.sendSms({
					phoneNumber: this.loggingFromData.phoneNumber,
				})

				if (res.code == "0000") {
					uni.showToast({
						icon: "success",
						title: "获取成功",
						duration: 500,
					});
				}

			},
			async harvestInfoadd() {
				let res = await this.muajax.harvestInfoadd({
					harvestVo: this.globalVariable,
				})
				if (res.code == "0000") {
					this.nextstep()
				} else {
					uni.showToast({
						icon: "error",
						title: res.message
					})
				}
			},
			nextstep() {
				this.$store.commit('saveData', {
					field: 'globalVariable',
					value: null,
					keep: true,
				})
				uni.navigateTo({
					url: "/pages/result/result",
				});
			},
			// 上传图片或视频
			async uploadImgVideo(tempFilePaths) {
				let file = tempFilePaths;
				let rs = await this.muajax.dfsUploadFiles({}, {
					filePath: file.path,
					name: 'files'
				})
				if (rs.code == '0000') {
					this.commitmentFiles = rs.appendixList;
				}

			},
		},
	};
</script>
<style lang="scss" scoped>
	.textindent {
		text-indent: 2ch;
		line-height: 48rpx;
	}

	.inform {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: rgba(248, 248, 248, 1);

		.inform-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			text-align: center;
			padding: 35rpx 0 27.5rpx 0;
		}

		.inform-content {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #666666;
			flex: 1;
			overflow: auto;

			.inform-content-box {
				margin-bottom: 32rpx;
				background: #fff;
				padding: 0 42rpx 20rpx;
			}

			.polygon {
				padding: 43rpx 29rpx 0;
				background-color: #ffffff;
				margin-bottom: 32rpx;
				overflow: hidden;

				.polygon-p {
					margin-bottom: 21rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.polygon-p-title {
						display: flex;
						justify-content: center;
						align-items: center;

						.polygon-p-title-f {
							color: rgba(255, 0, 0, 1);
							margin-right: 8rpx;
						}

						.polygon-p-title-t {
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 33rpx;
							color: rgba(51, 51, 51, 1);
						}
					}

					.polygon-p-btn {
						display: flex;
						align-items: center;

						.p-btn1 {
							width: 198rpx;
							height: 73rpx;
							background: #2cc396;
							border-radius: 10rpx;
							margin-left: 31rpx;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 31rpx;
							color: #ffffff;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.p-btn1[disabled] {
							border: 1px solid rgba(221, 224, 223, 1);
							background: #d0d0d0;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 31rpx;
							color: #ffffff;
						}
					}
				}

				.qianming {
					height: 260rpx;
					background: rgba(192, 192, 192, 0.1);
					border-radius: 16rpx;
					border: 2px dashed #c5c5c5;
					width: 100%;
					margin-bottom: 32rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.sign-image {
						width: 422rpx !important;
						height: 173rpx !important;
						background: #ffffff;
					}
				}
			}
		}

		.inform-btn {
			box-shadow: 0rpx -4rpx 19rpx 0rpx rgba(70, 70, 70, 0.1);
			padding: 32rpx 41rpx 32rpx;

			.long-radius-btn {
				width: 100%;
				// line-height: 92rpx;
				text-align: center;
			}

			.sumit-btn {
				background: rgba(44, 195, 150, 1);
				border-radius: 46rpx;
				color: #fff;
			}
		}
	}

	:deep() .uni-popup .uni-popup__wrapper {
		border-radius: 21rpx;
	}

	:deep() .uni-forms-item.is-direction-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: initial;
		// box-shadow: 0rpx 2rpx 0rpx 0rpx rgba(70, 70, 70, 0.1);
		border-radius: 0;


	}

	.input-text {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 33rpx;
		color: #2cc396;
		text-decoration-line: underline;
		// position: absolute;
		// top: 14rpx;
		right: 10rpx;
		cursor: pointer;
		background-color: rgba(0, 0, 0, 0);
		border: 0px solid #fff;
		padding: 0px;

		&::after {
			content: '';
			border: 0px solid #fff;
			background-color: none;

		}
	}

	:deep().uni-date-x--border {
		border: none;
	}

	:deep().uni-date-x .icon-calendar {
		display: none;
	}

	:deep().uni-date__x-input {
		text-align: end;
		padding-right: 26rpx;
	}

	.form-item-change :deep() {

		.uni-easyinput__content-input {
			text-align: start !important;
		}

		.uni-forms-item__content {
			border-bottom: 1px solid #f1f1f1;
		}

		.uni-forms-item__label {
			padding: 24rpx 0 14rpx !important;
		}

	}

	.form-item-change {
		display: initial !important;

		.form-item-text {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 27rpx;
			color: rgba(51, 51, 51, 0.5);
			line-height: 48rpx;
			width: 94%;
			margin-bottom: 20rpx;
		}

		.form-item-img {
			display: flex;
			justify-content: space-between;
			width: 100%;

			.form-item-img-item {
				width: 210rpx;
				height: 210rpx;
				background-size: cover;
				position: relative;

				.form-head {
					width: 100%;
					height: 51rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 0;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 29rpx;
					color: #ffffff;
				}
			}
		}

		.form-line {
			margin: 30rpx 0 20rpx;
			width: 100%;
			height: 1rpx;
			background: #ffffff;
			box-shadow: 0rpx 2rpx 0rpx 0rpx rgba(70, 70, 70, 0.1);
		}
	}

	.form-item-img :deep() {
		.uni-forms-item__content {
			border-bottom: 1px solid #f1f1f1;
			flex-direction: column;
		}
	}

	.form-item-g :deep() {
		.uni-easyinput__content-input {
			text-align: start !important;
		}
	}

	.form-item-two:deep() {

		// padding-bottom: 40rpx;
		.uni-forms-item__label {
			width: 240rpx !important;
			// margin-bottom: -52rpx !important;
		}

		.easyinput-text {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 11px;
			color: rgba(51, 51, 51, 0.5);
			position: absolute;
			// bottom: -40rpx;
			right: 26rpx;
		}
	}

	.form-item-input {
		:deep() .uni-easyinput__content-input {
			padding-right: 120rpx !important;
		}
	}

	:deep() .uni-forms-item__content {
		display: flex;
		align-items: center;
		justify-content: right;
	}

	:deep() .uni-data-tree {
		text-align: end;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 33rpx;
		color: rgba(51, 51, 51, 0.5);
	}

	:deep() .uni-forms-item .is-required {
		color: rgba(255, 0, 0, 1);
		margin-right: 6rpx;
	}

	:deep() .is-input-border {
		border: none;
	}

	:deep() .uni-easyinput__content-input {
		padding: 0 28rpx;
		text-align: end;
	}

	:deep() .uni-easyinput__placeholder-class {
		font-size: 33rpx;
	}

	:deep() .uni-file-picker__container {
		height: 100%;

		.icon-add {
			display: none;
		}
	}

	:deep() .is-disabled {
		background-color: #fff !important;
		color: initial !important;
	}

	:deep() .uni-file-picker {
		margin: 16rpx 0px 32rpx;
	}

	:deep() .file-picker__box:nth-last-child(1) {
		// padding-top: 0;
		// height: 93rpx !important;
		// border-radius: 10rpx !important;
		width: 100% !important;
		padding-top: 15% !important;
	}

	:deep() .is-add {
		width: 96% !important;
		height: 73rpx !important;
		border-radius: 10rpx !important;
		border: 1px dashed #2cc396 !important;
	}

	:deep() .file-picker__progress-item {
		opacity: 0;
	}

	:deep() {
		.uni-forms-item__label {
			width: auto !important;
			height: auto;
			font-size: 33rpx !important;
			padding: 0 !important;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 33rpx;
			color: rgba(51, 51, 51, 1);
		}

		.uni-forms-item {
			background: #ffffff;
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			border-bottom: 1px solid #f1f1f1;
			margin-bottom: 0px;
			height: 115rpx;
		}

		.uni-forms-item__error {
			display: none;
		}

		.content-clear-icon {
			display: none;
		}
	}

	.logging {
		background-color: rgba(248, 248, 248, 1);
		height: 100%;
		display: flex;
		flex-direction: column;

		.logging-content {
			flex: 1;
			overflow-y: auto;
		}

		.inform-btn {
			box-shadow: 0rpx -4rpx 19rpx 0rpx rgba(70, 70, 70, 0.1);
			padding: 32rpx 41rpx 32rpx;

			.checkbox {
				padding: 18rpx 0 25rpx 10rpx;
			}

			.long-radius-btn {
				width: 100%;
				// line-height: 92rpx;
				text-align: center;
			}

			.sumit-btn {
				background: rgba(44, 195, 150, 1);
				border-radius: 46rpx;
				color: #fff;
			}
		}
	}

	.logging-box {
		padding: 15rpx 32rpx 0;
		background-color: #ffffff;
		margin-bottom: 32rpx;
	}

	.basic-information-title {
		height: 92rpx;
		background-color: rgba(230, 248, 242, 1);
		display: flex;
		align-items: center;
		padding: 0 31rpx;

		.line {
			width: 8rpx;
			height: 40rpx;
			background: #2cc396;
			border-radius: 4rpx;
			margin-right: 25rpx;
		}

		.title-text {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 38rpx;
			color: #2cc396;
		}
	}

	.polygon {
		padding: 43rpx 29rpx 0;
		background-color: #ffffff;
		margin-bottom: 32rpx;
		overflow: hidden;

		.polygon-p {
			margin-bottom: 21rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.polygon-p-title {
				display: flex;
				justify-content: center;
				align-items: center;

				.polygon-p-title-f {
					color: rgba(255, 0, 0, 1);
					margin-right: 8rpx;
				}

				.polygon-p-title-t {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 33rpx;
					color: rgba(51, 51, 51, 1);
				}
			}

			.polygon-p-btn {
				display: flex;
				align-items: center;

				.p-btn1 {
					width: 198rpx;
					height: 73rpx;
					background: #2cc396;
					border-radius: 10rpx;
					margin-left: 31rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 31rpx;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.p-btn1[disabled] {
					border: 1px solid rgba(221, 224, 223, 1);
					background: #d0d0d0;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 31rpx;
					color: #ffffff;
				}
			}
		}

		.polygon-table {
			border: 1px solid #2cc396;
			margin-bottom: 29rpx;

			.polygon-table-p {
				display: flex;
				height: 73rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 31rpx;
				color: #333333;

				.polygon-table-p1 {
					width: 261rpx;
					border-right: 1px solid #2cc396;
					border-bottom: 1px solid #2cc396;
					margin-bottom: -1px;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.polygon-table-p2 {
					width: 131rpx;
					border-right: 1px solid #2cc396;
					border-bottom: 1px solid #2cc396;
					margin-bottom: -1px;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.polygon-table-p3 {
					flex: 1;
					border-bottom: 1px solid #2cc396;
					margin-bottom: -1px;
					display: flex;
					justify-content: start;
					align-items: center;
					padding: 0 31rpx;
					color: rgba(51, 51, 51, 0.5);
				}
			}
		}
	}

	.count {}

	.popup-content {
		width: 631rpx;
		height: 375rpx;
		box-shadow: 0rpx 3rpx 42rpx 0rpx rgba(14, 5, 10, 0.23);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.popup-content-img {
			background-image: url(../../static/caifa/zhuyi.png);
			width: 64rpx;
			height: 56rpx;
			background-size: cover;
		}

		.popup-content-text1 {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 37rpx;
			color: #333333;
			margin-top: 17rpx;
		}

		.popup-content-text2 {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 29rpx;
			color: #999999;
			margin-top: 15rpx;
		}

		.popup-content-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 36rpx;

			.cancel {
				width: 215rpx;
				height: 73rpx;
				background: #e2e2e2;
				border-radius: 36rpx;
				margin-right: 36rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 31rpx;
				color: #666666;
			}

			.confirm {
				width: 215rpx;
				height: 73rpx;
				background: #2cc396;
				border-radius: 36rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 31rpx;
				color: #ffffff;
			}
		}
	}

	.margin {
		margin-top: 40rpx;
	}

	.file-text {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 31rpx;
		color: #2cc396;
	}

	// .picker-view {
	//   position: absolute;
	//   left: 0px;
	//   top: 0px;
	//   width: 100%;
	//   height: 100%;
	//   z-index: 999;
	// }
</style>